<template>
  <div>
    <transition name="fade">
    <div class="cart-mask" v-show="listShow&&getCart[shop].goods.length!=0" @click="listShow=false"></div>
    </transition>
    <transition name="fade">
      <div class="cart-list" v-show="listShow&&getCart[shop].goods.length!=0">
        <div class="list-header">
          <h1 class="title">购物车</h1>
          <span class="cart-clear" @click="setEmpty()"><icon symbol="remove"></icon>清空</span>
        </div>
        <div class="list-content" ref="foodlist" v-if="getCart[shop]">
          <ul>
            <li class="food" v-for="(item,index) in getCart[shop].goods">
              <div class="p-name">
                <span>{{item.goName}}</span>
                <small v-if="item.haveSp">{{item.spSnName}}</small>
              </div>
              <div class="p-price">¥{{(item.goMoney*item.goNum).toFixed(1)}}</div>
              <div class="p-controll">
                <cart-control :goods="item" :shop="shop"></cart-control>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <footer class="cart-footer">
      <div class="cart-left">
        <span class="cart-gxb" @click="listShow=!listShow" >
          <img src="../../assets/cart-gxb.png" alt="" :class="{nogoods: cartNum == 0}">
        </span>
        <span class="cart-tip" v-if="cartNum>0">{{cartNum}}</span>
      </div>
      <div class="cart-price">
        <span v-if="cartNum==0">购物车为空</span><span v-if="cartNum>0">共¥ {{cartPrice}}</span>
      </div>
      <button class="cart-btn" :disabled="cartPrice<58" @click="submit"><span v-if="cartPrice>=58&&!isSubmit">选好了</span> <span v-if="cartPrice<58&&!isSubmit">58元起送</span><span v-if="isSubmit">提交中</span></button>
    </footer>
    <div class="ball-container">
      <transition name="drop" v-on:before-enter="beforeEnter"
                  v-on:enter="enter" v-on:after-enter="afterEnter"
                  v-for="(ball,index) in balls" :key="index">
        <div class="ball" v-show="ball.show">
        <div class="inner inner-hook"></div>
      </div>
      </transition>
    </div>
  </div>

</template>

<script lang="babel">
  import api from '@api'
  import {mapGetters} from 'vuex'
  import Icon from '@components/icon'
  import CartControl from './cartControl.vue'
  export default {
    components: {
      Icon,
      CartControl
    },
    props: ['shop'],
    data() {
      return {
        balls: [{
          show: false
        }, {
          show: false
        }, {
          show: false
        }, {
          show: false
        }, {
          show: false
        }],
        dropBalls: [],
        listShow: false,
        isSubmit: false
      }
    },
    created() {
      this.$root.eventHub.$on('cart.add', this.drop)
    },
    async mounted () {
      let state = await this.$store.dispatch('global/user/log');
    },
    computed: {
      ...mapGetters({
        getCart: 'frontend/cart/getCart',
        isLogin: 'global/user/isLogin',
      }),
      cartNum () {
        let _this = this;
        let shopId = this.shop;
        let initNum = 0
        if (this.getCart[shopId]) {
          this.getCart[shopId].goods.forEach((item)=>{
            initNum += item.goNum
          })
        }
        return initNum;
      },
      cartPrice() {
        let _this = this;
        let shopId = this.shop;
        let price = 0
        if (this.getCart[shopId]) {
          this.getCart[shopId].goods.forEach((item) => {
            price += item.goMoney*item.goNum
          })
        }
        return price.toFixed(1);
      },
      cartList() {
      }
    },
    methods: {
      drop(el) {
        for (let i = 0, l = this.balls.length; i < l; i++) {
          let ball = this.balls[i]
          if (!ball.show) {
            ball.show = true
            ball.el = el
            this.dropBalls.push(ball)
            return
          }
        }
      },
      beforeEnter(el) {
        let count = this.balls.length
        while (count--) {
          let ball = this.balls[count]
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect()
            let x = rect.left + window.lib.flexible.rem2px(19 / 75) - window.lib.flexible.rem2px(116 / 75);
            let y = -(window.innerHeight - window.lib.flexible.rem2px(19 / 75) - rect.top - window.lib.flexible.rem2px(96 / 75))
            el.style.display = ''
            el.style.webkitTransform = `translate3d(${-x},${y}px,0)`
            el.style.transform = `translate3d(0,${y}px,0)`
            let inner = el.querySelector('.inner-hook')
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`
            inner.style.transform = `translate3d(${x}px,0,0)`
          }
        }
      },
      enter(el) {
        el.offsetHeight
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0,0,0)'
          el.style.transform = 'translate3d(0,0,0)'
          let inner = el.querySelector('.inner-hook')
          inner.style.webkitTransform = 'translate3d(0,0,0)'
          inner.style.transform = 'translate3d(0,0,0)'
        })
      },
      afterEnter(el) {
        let ball = this.dropBalls.shift()
        if (ball) {
          ball.show = false
          el.style.display = 'none'
        }
      },
      setEmpty() {
        if(confirm('确认清空')){
          this.$store.dispatch('frontend/cart/clearCart', this.shop)
        }
      },
      async submit() {
        if(!this.isLogin) {
          this.$router.push({name: 'login', query:{redirect: '/account'}})
          return
        }
        if(this.isSubmit) {
         return
        }
        this.isSubmit = true;
        let config = {
          shoppingGoods: this.getCart[this.shop].goods,
          warehouseSn: this.shop
        }
        let {data: {StatusCode, Status, orderSn}} = await api.post('api/v2/Order/addTempOrder.ashx', config);
        if(StatusCode == '200') {
          this.$store.dispatch('global/toast', '提交成功');
          this.$router.push({name:'tempOrder', params:{orderId: orderSn}})
        } else {
          this.$store.dispatch('global/toast', Status);
        }
        this.isSubmit = false;
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>